<template>
  <!-- 1.3 辅助监控 -->
  <!-- 首页：全站总览（Overview） -->
  <div class="homepage betweenbox Overview">
    <div class="left" v-if="changeMenu!==4">
      <!-- 全站总览左侧菜单 -->
      <overviewMenu v-if="changeMenu===1" />
      <!-- 阀值设置 -->
      <thresholdvalueMenu v-if="changeMenu===2" />
      <!-- 五个系统 -->
      <fiveMenu v-if="changeMenu===3" />
    </div>
    <div class="right">
      <router-view class="homepage-view"></router-view>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { AuxiliaryMonitorModule } from "@/store/modules/AuxiliaryMonitor";
import overviewMenu from "./components/OverviewMenu/index.vue";
import thresholdvalueMenu from "./components/thresholdvalueMenu/index.vue";
import fiveMenu from "./components/FiveMenu/index.vue";
import { publicAPIModule } from "@/store/modules/public";
@Component({
  components: {
    overviewMenu,
    thresholdvalueMenu,
    fiveMenu,
  },
})
export default class extends Vue {
  @Watch("$route", { immediate: true, deep: true })
  public routechange(to: any, from: any) {
    // console.log(to);
    var selectrouter = to.path.split("/")[2];
    var pathValue = 0;
    if (selectrouter === "thresholdvalue") {
      pathValue = 2;
    } else if (selectrouter === "overview") {
      pathValue = 1;
    } else if (
      selectrouter === "linkage" ||
      selectrouter === "videodetail" ||
      selectrouter === "videodetail2"
    ) {
      pathValue = 4;
    } else {
      pathValue = 3;
    }
    AuxiliaryMonitorModule.setActiveRouter(pathValue);
  }
  get changeMenu() {
    return AuxiliaryMonitorModule.activeRouter;
  }

  mounted() {
    publicAPIModule.queryHasDataStations('AUX');
    publicAPIModule.setstationTreeList({ deviceBoard: 1 }); //公共方法-变电站树图
    publicAPIModule.getAreaDict(); //获取区域字典
    publicAPIModule.queryStations(); //下拉框变电站
    publicAPIModule.queryAlermStatus(); //下拉框报警状态
    publicAPIModule.queryCitys(); //下拉框所属地市
    publicAPIModule.querySystems(); //下拉框所属系统
    publicAPIModule.querySubSystem(); //获取子系统名称
  }
}
</script>
<style lang="scss" scoped>
.homepage {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0.88rem 0.24rem 0.24rem;
  margin: 0;
  color: #fff;
  .left {
    // width: 3.03rem;
    height: 100%;
  }
  .right {
    // width: calc(100% - 3.23rem);
    flex: 1;
    height: 100%;
    .homepage-view {
      width: 100%;
      height: 100%;
    }
  }
}
</style>






